<template>
    <div class="love-city" v-if="store.isLove">
        <el-card shadow>
            <template #header>
                <div class="card-header">
                    <h2>心仪城市推荐</h2>
                </div>
            </template>
            <div>
                <span>空气质量 : </span>
                <el-rate v-model="store.pmValue" :texts="['非常不重视', '不重视', '一般', '重视', '非常重视']" show-text clearable
                    :colors="['#ff2d51', 'orange', '#67c23a']" :void-icon="Sunrise" @change="changeRate('pm')" />
            </div>
            <div>
                <span>城市气温 : </span>
                <el-rate v-model="store.tempValue" :texts="['喜欢低温', '喜欢较低气温', '一般', '喜欢较高温度', '喜欢高温']" show-text
                    clearable :colors="['#ff2d51', 'orange', '#67c23a']" :void-icon="Sunset"
                    @change="changeRate('temp')" />
            </div>
            <div>
                <span>城市降雨 : </span>
                <el-rate v-model="store.rainyValue" :texts="['不喜欢下雨', '较不喜欢下雨', '一般', '较欢下雨', '喜欢下雨']" show-text
                    clearable :colors="['#ff2d51', 'orange', '#67c23a']" :void-icon="Pouring"
                    @change="changeRate('rainy')" />
            </div>
            <div>
                <span>光照强度 : </span>
                <el-rate v-model="store.sunValue" :texts="['不喜欢阳光', '较不喜欢阳光', '一般', '较欢阳光', '喜欢阳光']" show-text clearable
                    :colors="['#ff2d51', 'orange', '#67c23a']" :void-icon="Sunny" @change="changeRate('sun')" />
            </div>
            <div>
                <span>城市海拔 : </span>
                <el-rate v-model="store.heightValue" :texts="['低海拔', '较低海拔', '一般', '较高海拔', '高海拔']" show-text clearable
                    :colors="['#ff2d51', 'orange', '#67c23a']" :void-icon="Refrigerator"
                    @change="changeRate('height')" />
            </div>
            <div>
                <span>人均收入 : </span>
                <el-rate v-model="store.gdpValue" :texts="['低收入', '较低收入', '一般', '较高收入', '高收入']" show-text clearable
                    :colors="['#ff2d51', 'orange', '#67c23a']" :void-icon="Money" @change="changeRate('gdp')" />
            </div>
            <template #footer>
                <div class="btn">
                    <el-button type="info" @click="reset">重置评分</el-button>
                    <el-button type="success" @click="success" :disabled="fullList ? false : true">确认提交</el-button>
                </div>
            </template>
        </el-card>
        <el-button type="danger" class="close" @click="close">X</el-button>
    </div>

    <div class="love-city" v-if="isPut">
        <el-card class="result" shadow>
            <template #header>
                <div class="card-header">
                    <h2>结果预览</h2>
                </div>
            </template>
            <div class="content">
                <div class="item" v-for="item, index in citiesObj" :key="index">
                    <span class="index">{{ index + 1 }}</span> <span class="city">{{ item.city }}</span>
                    <el-button type="success" @click="fly(item)">定位</el-button>
                </div>
            </div>
            <el-button type="danger" class="closeResult" @click="closeResult">X</el-button>
        </el-card>
    </div>
</template>

<script setup>
import { inject, onMounted, ref } from 'vue';
import { mapStore } from '@/stores/counter';
import { Sunrise, Sunset, Pouring, Sunny, Refrigerator, Money } from '@element-plus/icons-vue'
import axios from 'axios';
import { ElMessage } from 'element-plus'
const store = mapStore()
const fullList = ref(false)
let map
let pmData = '/src/source/空气质量/pm2.5.csv'
let tempData = '/src/source/气温/2020年逐年平均气温.csv'
let rainyData = '/src/source/降水/2020年逐年降水.csv'
let sunData = '/src/source/日照/2020年逐年日照.csv'
let heightData = '/src/source/海拔/城市海拔.csv'
let gdpData = '/src/source/GDP/2020-GDP-经纬度.csv'
let pm, temp, rainy, sun, height, gdp
const citiesObj = ref([])
const count = ref(1)
const isPut = ref(false)
const reset = () => {
    isPut.value = false
    citiesObj.value = []
    store.WeightList = [
        { pm: null },
        { temp: null },
        { rainy: null },
        { sun: null },
        { height: null },
        { gdp: null }
    ]
    store.pmValue = 0;
    store.tempValue = 0;
    store.rainyValue = 0;
    store.sunValue = 0;
    store.heightValue = 0;
    store.gdpValue = 0;
}

onMounted(() => {
    map = inject('$map')
})
const close = () => {
    store.isLove = false
}

const closeResult = () => {
    isPut.value = false
}

const fly = (item) => {
    map.flyTo({
        center: [item.lng, item.lat],
        zoom: 12,
        speed: 0.8,
    })
}

const success = async () => {
    isFull()
    store.WeightList.sort((a, b) => {
        const valueA = Object.values(a)[0];
        const valueB = Object.values(b)[0];
        return valueB - valueA; // 降序排列
    });
    for (const [index, item] of store.WeightList.entries()) {
        for (let key in item) {
            let data;
            if (key == 'pm') {
                data = await loadData(pmData, 0, 1, 2, 24);
                pm = await weightData(store.pmValue, data, 'pm')
                addCity(pm)
            } else if (key == 'temp') {
                data = await loadData(tempData, 3, 6, 7, 5);
                temp = await weightData(store.tempValue, data, 'temp')
                addCity(temp)
            } else if (key == 'rainy') {
                data = await loadData(rainyData, 2, 8, 9, 4);
                rainy = await weightData(store.rainyValue, data, 'rainy')
                addCity(rainy)
            } else if (key == 'sun') {
                data = await loadData(sunData, 2, 8, 9, 4);
                sun = await weightData(store.sunValue, data, 'sun')
                addCity(sun)
            } else if (key == 'height') {
                data = await loadData(heightData, 3, 9, 10, 7);
                height = await weightData(store.heightValue, data, 'height')
                addCity(height)
            } else if (key == 'gdp') {
                data = await loadData(gdpData, 1, 8, 9, 6);
                gdp = await weightData(store.gdpValue, data, 'gdp')
                addCity(gdp)
            }
        }
    }
    citiesObj.value = citiesObj.value.sort((a, b) => b.count - a.count).slice(0, 3)
    ElMessage({
        message: '提交成功!正在推算城市中...',
        type: 'success',
    })
    setTimeout(() => {
        isPut.value = true
    }, 1000)
}

// 添加城市数组方法
const addCity = async (cityObj) => {
    // 遍历原始数组
    if (citiesObj.value.length != 0) {
        cityObj.forEach((item) => {
            let index = citiesObj.value.findIndex(_item => _item.city == item.city)
            if (index == -1) {
                citiesObj.value.push({
                    city: item.city,
                    lng: item.lng,
                    lat: item.lat,
                    count: count.value
                })
            } else {
                citiesObj.value[index].count++
            }
        })
    } else {
        cityObj.forEach((item) => {
            citiesObj.value.push({
                city: item.city,
                lng: item.lng,
                lat: item.lat,
                count: count.value
            })
        })
    }

}

// 权重判断方法
const weightData = async (rate, data, type) => {
    if (type == 'pm') {
        switch (rate) {
            case 5:
                data = data.sort((a, b) => a.cityValue - b.cityValue).slice(0, 10)
                break;
            case 4:
                data = data.sort((a, b) => a.cityValue - b.cityValue).slice(0, 30)
                break;
            case 3:
                data = data.sort((a, b) => a.cityValue - b.cityValue).slice(0, 50)
                break;
            case 2:
                data = data.sort((a, b) => a.cityValue - b.cityValue).slice(0, 70)
                break;
            case 1:
                data = data.sort((a, b) => a.cityValue - b.cityValue).slice(0, 100)
                break;
            default:
                break;
        }
        return data
    } else if (type == 'gdp') {
        switch (rate) {
            case 5:
                data = data.sort((a, b) => a.cityValue - b.cityValue).slice(0, 10)
                break;
            case 4:
                data = data.sort((a, b) => a.cityValue - b.cityValue).slice(0, 30)
                break;
            case 3:
                data = data.sort((a, b) => b.cityValue - b.cityValue).slice(0, 50)
                break;
            case 2:
                data = data.sort((a, b) => a.cityValue - a.cityValue).slice(0, 70)
                break;
            case 1:
                data = data.sort((a, b) => b.cityValue - a.cityValue).slice(0, 100)
                break;
            default:
                break;
        }
        return data
    }
    else {
        switch (rate) {
            case 5:
                data = data.sort((a, b) => b.cityValue - a.cityValue).slice(0, 10)
                break;
            case 4:
                data = data.sort((a, b) => b.cityValue - a.cityValue).slice(0, 30)
                break;
            case 3:
                data = data.sort((a, b) => b.cityValue - a.cityValue).slice(0, 50)
                break;
            case 2:
                data = data.sort((a, b) => a.cityValue - b.cityValue).slice(0, 70)
                break;
            case 1:
                data = data.sort((a, b) => a.cityValue - b.cityValue).slice(0, 100)
                break;
            default:
                break;
        }
        return data
    }

}

// 加载数据方法
const loadData = async (url, cityIndex, lngIndex, latIndex, valueIndex) => {
    const res = await axios.get(url)
    const lines = res.split('\n')
    const data = lines.slice(1).map(item => {
        const value = item.split(',')
        return {
            city: value[cityIndex],
            lng: parseFloat(value[lngIndex]),
            lat: parseFloat(value[latIndex]),
            cityValue: parseFloat(value[valueIndex]),
        }
    })
    return data
}

// 判断是否选满权重值
const isFull = () => {
    if (store.WeightList.every(item => Object.values(item)[0] !== null)) {
        fullList.value = true
    }
}

const changeRate = (type) => {
    if (type == 'pm') {
        store.WeightList[0].pm = store.pmValue
        isFull()
    } else if (type == 'temp') {
        store.WeightList[1].temp = store.tempValue
        isFull()
    } else if (type == 'rainy') {
        store.WeightList[2].rainy = store.rainyValue
        isFull()
    } else if (type == 'sun') {
        store.WeightList[3].sun = store.sunValue
        isFull()
    } else if (type == 'height') {
        store.WeightList[4].height = store.heightValue
        isFull()
    } else if (type == 'gdp') {
        store.WeightList[5].gdp = store.gdpValue
        isFull()
    }
}
</script>

<style scoped lang="scss">
.love-city {
    position: absolute;
    top: 25%;
    left: 10%;

    .result {
        position: fixed;
        bottom: 25%;
        right: 15.5%;

        .content {
            .item {
                display: flex;
                justify-content: space-around;
                padding: 10px;
                margin: 5px;

                .index {
                    margin-right: -15px;
                }

                .city {
                    line-height: 30px;
                    width: 80px
                }
            }
        }

        .closeResult {
            position: absolute;
            top: 5px;
            left: 5px;
        }
    }

    .el-card {
        width: 350px;
        border: none;

        h2 {
            text-align: center;
        }
    }

    h2,
    span {
        font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
        color: #fff;
    }

    .el-rate {
        margin-left: 10px;
    }

    .btn {
        display: flex;
        justify-content: center;
    }

    .close {
        position: absolute;
        top: 5px;
        right: 5px;
    }

}

::v-deep .el-card__header {
    box-sizing: border-box;
    background: #598496;
}

::v-deep .el-card__body {
    background: #598496;
}

::v-deep .el-card__footer {
    background: #598496;
}
</style>
